<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
{% include 'base/cssJs.html.twig' %}
<style type="text/css">
html {
    background-color: #393D49;
}
#login_box {
    position: absolute;
    width: 480px;
    height: 340px;
    margin-left: -240px;
    margin-top: -170px;
    left: 50%;
    top: 50%;
}
#image_box {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 38px;
    cursor: pointer;
}
img {
    display: none;
}
</style>
</head>
<body>
<div class="layui-card" id="login_box">
    <div class="layui-card-header layui-bg-green">智能管理系统</div>
    <div class="layui-card-body" style="padding:50px;">
        <form class="layui-form layui-form-pane" method="post">
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="username" id="username" lay-verify="username" placeholder="请输入用户名" minlength="5" maxlength="16">
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="password" id="password" lay-verify="password" placeholder="请输入密码" minlength="9" maxlength="16">
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="validCode" id="validCode" lay-verify="validCode" placeholder="请输入验证码" minlength="6" maxlength="6" autocomplete="off">
                    <div id="image_box">
                        <img src="" id="image" width="100" height="38" data-src="/Api/ImageValidCode/make"/>
                    </div>
                </div>
            </div>
            <!---->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="validCodeName" id="validCodeName" value="">
                    <input type="hidden" name="device" value="admin">
                    <input type="hidden" name="csrf" value="{{ csrf }}">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="default">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
                <div style="text-align:center;margin-top:15px;"><a href="/Admin/Qr/login">扫码登录</a></div>
            </div>
            <!---->
        </form>
    </div>
</div>
<script type="text/javascript">
layui.use(["form", "layer", "jquery", "cookies"], function(form, layer, $, cookies){

    function getVerify()
    {
        var result = {
            username:function(value){if(value.length < 5 || value.length > 16){return "请输入用户名(5-16位)";}},
            password:function(value){if(value.length < 9 || value.length > 16){return "请输入密码(9-16位)";}},
            validCode:function(value){if(value.length != 6){return "请输入验证码(6位)";}}
        };
        return result;
    }

    function refresh()
    {
        function success(json)
        {
            $("#validCodeName").val(json.data.name);
            img.attr("src", json.data.content).show();
        }

        var img = $("#image");
        var url = img.attr("data-src") + "?w=" + img.attr("width") + "&h=" + img.attr("height") + "&r=" + Math.random();
        sendGetRequest(url, success);
    }

    $("#image").click(function(){
        refresh();
    });

    form.on('submit(default)', function(data){
        function success(json)
        {
            if(json.code > 0){
                layer.msg(json.msg);
            }
            else{
                cookies.setItem("token", json.data.token, null, "/");
                window.location.href = "/Admin/Home/selectUser";
            }
        }

        sendPostRequest("/Api/User/login", toFormData(data.field), success);
        return false;
    });

    refresh();
    form.verify(getVerify());
});
</script>
</body>
</html>